<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<svg width="200px" height="200px" viewBox="0 0 200 200">
			<!--平行四边形-->
			<polygon points="15,10 55,10 45,20 5,20" style="fill: red;stroke: black;" />
			
			<!--五角星-->
			<!--<polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #cfc;stroke: green;" />-->
			<polygon points="35 37.5,  37.9 46.1, 46.9 46.1, 39.7 51.5, 42.3 60.1, 35 55, 27.7 60.1, 30.3 51.5, 23.1 46.1, 32.1 46.1" style="fill:blue;stroke: red;" />
			
			<!--不规则图形-->
			<polygon points="60 60, 65 72, 80 60, 90 90, 72 80 , 72 85, 50 95" style="fill: yellow;fill-opacity: 0.5;stroke: black;" />
		</svg>
		
		<!--填充边线交叉的多边形-->
			<!--未填充的五角星-->
			<svg width="200" height="200" viewBox="0 0 200 200">
				<polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke: black;fill: none;" />
			</svg>	
			
			<!--不同的填充效果-->
			<svg width="200" height="200" viewBox="0 0 200 200">
				<polygon points="48,16 16,96 96,48 0,48 80,96" style="fill-rule: nonzero;fill: yellow;stroke: black;" />
				<polygon points="148,16 116,96 196,48 100,48 180,96" style="fill-rule: evenodd;fill: #0f0;stroke: black;" />
			</svg>
	</body>
</html>
